<template>
  <view class="user__navigator">
    <view
      class="user__navigator-item"
      hover-class="common-hover"
      :hover-stay-time="50"
      @click="openAttendance"
    >
      <text class="iconfont icon-qiandao"></text>
      <text>签到得书币</text>
    </view>
    <view
      class="user__navigator-item"
      hover-class="common-hover"
      :hover-stay-time="50"
      @click="handleGotoReadtime"
    >
      <text class="iconfont icon-shichang"></text>
      <text>读书时长</text>
    </view>
    <view
      class="user__navigator-item"
      hover-class="common-hover"
      :hover-stay-time="50"
      @click="handleGotoNotice"
    >
      <text class="iconfont icon-xiaoxi"></text>
      <text>我的消息</text>
    </view>
    <view
      class="user__navigator-item"
      hover-class="common-hover"
      :hover-stay-time="50"
      @click="handleGotoClassify"
    >
      <text class="iconfont icon-fenlei"></text>
      <text>分类</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },

  methods: {
    openAttendance() {
      this.$emit('open-attendance');
    },

    navTo(path) {
      if (!path) return false;
      uni.navigateTo({ url: path });
    },

    handleGotoReadtime() {
      uni.navigateTo({ url: '/pages/readtime/index' });
    },

    handleGotoNotice() {
      uni.navigateTo({ url: '/sub-packages/notice/index' });
    },

    handleGotoClassify() {
      uni.navigateTo({ url: '/pages/classify/index' });
    }
  }
};
</script>

<style lang="scss">
.user {
  &__navigator {
    display: flex;
    justify-content: space-around;
    align-content: center;
    background: #fff;
    border-radius: 10rpx;
    padding: 28rpx 0;
    margin-top: 20rpx;
    &-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 120rpx;
      height: 120rpx;
      border-radius: 10rpx;
      font-size: $font-sm;
      color: $font-color-dark;
    }

    .iconfont {
      font-size: 38rpx;
      margin-bottom: 18rpx;
      color: #4990e2;
    }
  }
}
</style>
